<template>
  <el-tooltip :content="title" placement="top">
    <span class="td-button" :style="iconStyle">
      <svg-icon :name="icon" @click="$emit('click')"></svg-icon>
    </span>
  </el-tooltip>
</template>

<script>
export default {
  name: 'td-button',
  props: {
    title: String,
    icon: String,
    iconStyle: [String, Object]
  }
}
</script>

<style scoped>
  .td-button {
    font-size: 1.2em;
    border: 1px solid #ddd;
    padding-left: 6px;
    padding-right: 6px;
    display: inline-block;
    border-radius: 4px;
    color: gray;
  }
  .td-button + .td-button {
    margin-left: 10px;
  }
</style>
